
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>课程管理</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/lib/bootstrap/bootstrap.min.css" media="all">
  </head>
  <body style="font-size: 0.9rem;" class="m-3">
    <%--    搜索栏--%>
    <div class="d-flex">
      <div class="col-auto">
        <input id="courseName" class="form-control form-control-sm" value="" placeholder="请输入课程名称"/>
      </div>
      <button id="searchBtn" class="layui-btn layui-btn-primary layui-btn-sm"><i
        class="layui-icon layui-icon-search"></i>搜索
      </button>
      <button id="resetBtn" class="layui-btn layui-btn-primary layui-btn-sm"
              style="border: 1px solid #FF7670;color: #FF7670"><i
        class="layui-icon layui-icon-close"></i>
        重置
      </button>
      <button id="addBtn" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon layui-icon-add-1"></i>新增
      </button>
    </div>
    <%--      表格容器--%>
    <table id="courseTable" lay-filter="courseTable"></table>
    <%--      头部工具条--%>
    <script type="text/html" id="headerbar">
      
    </script>
    <%--      行工具条--%>
    <script type="text/html" id="linebar">
      <a lay-event="edit" class="layui-btn layui-btn-sm layui-btn-normal"><i class="layui-icon layui-icon-edit"></i>编辑
      </a>
      <a lay-event="del" class="layui-btn layui-btn-sm layui-btn-danger"><i class="layui-icon layui-icon-delete"></i>删除
      </a>
    </script>
    <script src="${pageContext.request.contextPath}/lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
    <script src="${pageContext.request.contextPath}/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <script src="${pageContext.request.contextPath}/js/lay-config.js" charset="utf-8"></script>
    <script src="${pageContext.request.contextPath}/js/http.js" charset="utf-8"></script>
    <script>
        layui.use(['table', 'layer'], function () {
            var table = layui.table;
            var layer = layui.layer;
            //渲染表格
            table.render({
                elem: '#courseTable',
                url: '/course.do?method=list',
                height: 'full-80',
                toolbar: '#headerbar',
                cols: [[
                    {field: 'courseNum', title: '课程编号', align: 'center'},
                    {field: 'courseName', title: '课程名称', align: 'center'},
                    {field: 'courseType', title: '课程类型', align: 'center'},
                    {field: 'courseCount', title: '课时', align: 'center'},
                    {field: 'coursePoint', title: '学分', align: 'center'},
                    {field: 'address', title: '授课地址', align: 'center'},
                    {field: 'courseDesc', title: '课程描述', align: 'center'},
                    {title: '操作', width: 180, align: 'center', toolbar: '#linebar'}
                ]],
                page: true,
                limit: 10,
                limits: [10, 20, 30, 50]
            })

            //表格重载
            function reload() {
                table.reload('courseTable', {
                    where: { //设定异步数据接口的额外参数，任意设
                        courseName: $("#courseName").val()
                    },
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
            }

            //行工具条监听
            table.on('tool(courseTable)', function (obj) {
                console.log(obj)
                if (obj.event == 'edit') {
                    //打开弹框
                    var index = layer.open({
                        title: '编辑课程',
                        skin: 'layui-layer-molv',
                        type: 2,
                        offset: '0px',
                        area: ['700px', '400px'],
                        content: '/course.do?method=editUI&courseId=' + obj.data.courseId,
                        btn: ['确定', '取消'],
                        btn1: function (index) {
                            //获取表单数据
                            var parms = window['layui-layer-iframe' + index].addParms();
                            if (parms) {
                                console.log(parms)
                                //发送请求
                                http.post("/course.do?method=editSave", parms, function (res) {
                                    //刷新表格
                                    reload()
                                    layer.msg(res.msg)
                                    layer.close(index)
                                })
                            }
                        },
                        btn2: function (index) {

                        }
                    })
                }
                if (obj.event == 'del') {
                    layer.confirm('确定删除该数据吗?', {icon: 3, title: '系统提示'}, function (index) {
                        //do something
                        http.post("/course.do?method=delete", {courseId: obj.data.courseId}, function (result) {
                            if (result.code == 200) {
                                layer.msg(result.msg);
                                layer.close(index)
                                //刷新表格
                                reload()
                            }
                        })
                        // layer.close(index);
                    });
                }
            })
            //搜索按钮点击事件
            $("#searchBtn").click(function () {
                reload();
            })
            //重置按钮点击事件
            $("#resetBtn").click(function () {
                //清空搜索框
                $("#courseName").val('')
                reload();
            })
            //新增按钮点击事件
            $("#addBtn").click(function () {
                //打开弹框
                var index = layer.open({
                    title: '新增课程',
                    skin: 'layui-layer-molv',
                    type: 2,
                    offset: '0px',
                    area: ['700px', '400px'],
                    content: '/course.do?method=addUI',
                    btn: ['确定', '取消'],
                    btn1: function (index) {
                        //获取表单数据
                        var parms = window['layui-layer-iframe' + index].addParms();
                        if (parms) {
                            console.log(parms)
                            //发送请求
                            http.post("/course.do?method=addSave", parms, function (res) {
                                //刷新表格
                                reload()
                                layer.msg(res.msg)
                                layer.close(index)
                            })
                        }
                    },
                    btn2: function (index) {

                    }
                })
            })
        })
    </script>
  </body>
</html>
